<template>
  <div style="margin: 10px">
    <el-button size="mini" type="primary" @click="openAdd">添加用户</el-button>
    <Tabel
      :columns="columns"
      :table-data="userList"
      :loading="loading"
      :page-index="queryForm"
    >
      <el-table-column
        slot="handleColumn"
        label="操作"
        width="200"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="primary"
            @click="openEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="delUser(scope.row)"
          >删除</el-button>
        </template>
      </el-table-column>
    </Tabel>
    <!-- 用户添加编辑表单 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
      :before-close="resetForm"
    >
      <!-- 用户名 -->
      <el-form
        ref="ruleForm"
        :model="form"
        :rules="rules"
        :close-on-click-modal="false"
      >
        <el-form-item label="用户名" label-width="100px" prop="realname">
          <el-input v-model="form.realname" autocomplete="off" />
        </el-form-item>
        <!-- 用户账号 -->
        <el-form-item label="用户账号" label-width="100px" prop="username">
          <el-input v-model="form.username" autocomplete="off" />
        </el-form-item>
        <!-- 用户密码 -->
        <el-form-item
          label="用户密码"
          label-width="100px"
          :prop="title === '添加用户' ? 'password' : ''"
        >
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm">取 消</el-button>
        <el-button
          type="primary"
          @click="submitForm('ruleForm')"
        >确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
const Tabel = () => import('@/components/Table')
import { userlist, delUser, userAdd, editUser } from '@/api/user'
export default {
  components: { Tabel },
  data() {
    return {
      userList: [],
      loading: false,
      dialogFormVisible: false,
      title: '添加用户',
      form: {}, // 用户表单
      queryForm: {
        size: 10,
        current: 1
      },
      columns: [
        {
          prop: 'username',
          label: '账号'
        },
        {
          prop: 'realname',
          label: '用户'
        }
      ],
      rules: {
        realname: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.query()
  },
  methods: {
    query() {
      this.loading = true
      userlist()
        .then((res) => {
          this.userList = res.userList
        })
        .finally(() => {
          this.loading = false
        })
    },
    // 打开添加用户弹窗
    openAdd() {
      this.dialogFormVisible = true
      this.title = '添加用户'
    },
    // 添加编辑请求
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.title === '添加用户') {
            // 用户添加
            userAdd(this.form).then((res) => {
              if (res.code === 200) {
                this.$message.success(res.msg)
              } else {
                this.$message.error(res.msg)
              }
              this.resetForm()
              this.query()
            })
          } else {
            // 用户编辑
            editUser(this.form).then((res) => {
              if (res.code === 200) {
                this.$message.success(res.msg)
              } else {
                this.$message.error(res.msg)
              }
              this.resetForm()
              this.query()
            })
          }
        }
      })
    },
    // 打开用户编辑
    openEdit(row) {
      this.dialogFormVisible = true
      this.title = '用户编辑'
      this.form = { ...row }
    },
    // 删除
    delUser(row) {
      delUser({ id: row.id }).then((res) => {
        if (res.code === 200) {
          this.$message.success('删除成功')
        } else {
          this.$message.error('删除失败')
        }
        this.query()
      })
    },
    // 取消弹窗
    resetForm() {
      this.dialogFormVisible = false
      this.$refs['ruleForm'].resetFields()
      this.form = {}
    }
  }
}
</script>
<style scoped>
</style>
